import React, { useEffect, useState, useRef } from 'react'
import { Row, Col, Form, Input, Button, Modal, Typography, Select, Table, Tag, Space, Popconfirm } from "antd"
import myinfo from '../mobx/info'
import { observer } from 'mobx-react'
import { ColumnsType } from 'antd/lib/table';
import { roleList } from '../../utils/common';
import Avatar from 'antd/lib/avatar/avatar';
import { baseURL } from '../../api/request';
import { UserOutlined } from '@ant-design/icons';
import { ajax } from '../../api';
const { Title } = Typography
const { Column, ColumnGroup } = Table

function Listuser() {

    const { userList, getUserListAsync, getUserList, userInfo } = myinfo
    useEffect(() => {
        getUserListAsync({})
    }, [])
    const [show, setShow] = useState<boolean>(false)
    const [obj, setObj] = useState<any>({})
    const keyword: any = useRef()
    const [role, setRole] = useState<any>()
    const columns: ColumnsType<any> = [
        {
            title: '#',
            render: (text: any, value: any, index: number) => <b>{index + 1}</b>,
            width: 60,
            align: 'center'
        },
        {
            title: "用户名",
            dataIndex: "username",
            key: "username",
            render: (text: any) => <b>{text}</b>,
            align: "center"
        },
        {
            title: "头像",
            dataIndex: "avatar",
            key: "avatar",
            align: "center",
            render: (text: any) => (text ? <Avatar src={text?.replace(/public/, baseURL)}  ></Avatar> : <Avatar icon={<UserOutlined />}  ></Avatar>)
        },
        {
            title: "手机号码",
            dataIndex: "phone",
            key: "phone",
            align: "center",
            render: (text: any) => <b>{text}</b>,
        },
        {
            title: "用户身份",
            dataIndex: "role",
            key: "role",
            align: "center",
            render: (text: any, item: any) => {
                return (
                    <Tag color={roleList.find(l => l.value == text)?.color}>
                        {roleList.find(l => l.value == text)?.text}
                    </Tag>
                )
            }
        },
        {
            title: "操作",

            align: "center",
            render: (text: any, item: any) => {
                return (
                    <div>
                        <Button size="small" type="primary" style={{ margin: "0 10px" }} onClick={() => showModal(item)}> 修改 </Button>
                        <Popconfirm
                            title="你真的要删除吗?"
                            onConfirm={() => confirm(item)}
                            okText="确定"
                            cancelText="不了"
                        >
                            <Button danger size="small" style={{ margin: "0 3px" }}> 删除 </Button>
                        </Popconfirm>
                    </div>
                )
            }
        }

    ]

    const showModal = (item: any) => {
        setShow(true)
        form.setFieldsValue({
            role: item.role,

        })
        setObj(item)
    }
    const confirm = async (item: any) => {
        let { code, result }: any = await ajax.deleteuser({ _id: item._id })
        if (code == 200) {
            var list = userList.filter((val: any) => val._id != item._id)
            getUserList(list)
        }
    }
    const conformSet = async () => {
        const data = form.getFieldsValue()
        console.log(data)
        const { code, result }: any = await ajax.setuserrole({
            ...data,
            _id: obj._id
        })
        if (code == 200) {
            var list = userList.map((item: any) => {
                if (item._id == obj._id) {
                    item.role = data.role
                }
                return item
            })
            getUserList(list)
            setShow(false)
        }
    }
    const handleCancel = () => {
        setShow(false)
    }
    const [form] = Form.useForm()

    const todoStartSearch = () => {
        const kw = keyword.current.state.value;
        console.log(kw);
        getUserListAsync({
            keyword: kw,
            role: role
        })
    }
    const changeRole = (value: any) => {
        console.log(value)
        setRole(value)

    }
    return (
        <div>
            <Title level={2}>用户列表</Title>
            <Row>
                <Col span={6}>
                    <Input placeholder='请输入搜索关键字' ref={keyword}  ></Input>
                </Col>
                <Col span={6} offset={1}>
                    <Select placeholder="请选择搜索身份" onChange={changeRole} style={{ width: "100%" }}>
                        {
                            roleList.map((l, i) => {
                                return (
                                    <Select.Option value={l.value} key={i} >
                                        {l.text}
                                    </Select.Option>
                                )
                            })
                        }
                    </Select>
                </Col>
                <Col span={6} offset={1}>
                    <Button danger onClick={todoStartSearch} >搜索</Button>
                </Col>
            </Row>
            <Row style={{ marginTop: 10 }}>
                <Col span={18}>
                    <Table dataSource={userList}
                        columns={columns}
                        sticky
                        bordered
                        id="table"
                        pagination={{ pageSize: 6 }}
                        rowKey={item => item._id}
                    >

                    </Table>
                </Col>

            </Row>
            <Modal
                title={"修改用户 (" + obj.username + ") 信息 "}
                visible={show}
                onOk={conformSet}
                onCancel={handleCancel}
                okText="确定修改"
                okType="danger"
                width={'30%'}
                cancelText="取消修改"
            >
                <Form
                    name="basic"
                    autoComplete="off"
                    form={form}
                    layout={'horizontal'}
                    labelCol={{ span: 24 }}
                    wrapperCol={{ span: 24 }}

                >
                    <Form.Item
                        label="用户身份"
                        name="role"
                        rules={[
                            { required: true, message: '请选择角色!' }
                        ]}
                    >

                        <Select placeholder="请选择用户身份"  >
                            {
                                roleList.map((l, i) => {
                                    return (
                                        <Select.Option disabled={l.value >= userInfo?.role} value={l.value} key={i} >
                                            {l.text}
                                        </Select.Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default observer(Listuser)